<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/sytle.css?v=0.2&d=2016-11-08">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/lib/jquery/1.9.1/jquery.min.js?v=0.1"></script>
<title>注册</title>
<script type="text/javascript">
var InterValObj;
var curCount = 60;
var isReg = false;
var isSendMsg = true;
	$(function() {
		
		$('#smsCode').change(function() {
			var mobile = $("#mobile").val();
			var flag = true;
			if (mobile == '' || mobile.length < 10 || isNaN(mobile)) {
				$("#tip").show();
				$("#tipMsg").text("请输入手机号码");
				flag = false;
				close();
			}

			if (!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))) {
				$("#tipMsg").text("请输入有效的手机号码！");
				flag = false;
				close();
			}

			if (flag) {
				$.ajax({
					type : "GET",
					url : "/members/checkMobile/" + mobile + ".json",
					dataType : "json",
					success : function(data) {
						if (data == 0) {
							isReg = true;
							$("#tip").show();
							$("#tipMsg").text("手机号码已经注册过");
							close();
						}
					}
				});
			}

		});

	

		
		$("#btn_sub").click(function() {
			var is = true;
			var mobile = $("#mobile").val();
			if (mobile == '' || mobile.length < 10 || isNaN(mobile)) {
				$("#tip").show();
				$("#tipMsg").text("请输入手机号码");
				is = false;
				close();
			}

			if (!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))) {
				$("#tip").show();
				$("#tipMsg").text("请输入有效的手机号码！");
				is = false;
				close();
			}

			var smsCode = $("#smsCode").val();

			if (smsCode == '' || smsCode.length < 6) {

				$("#tip").show();
				$("#tipMsg").text("请输入短信验证码");
				is = false;
				close();
			}
			var password = $("#password").val();
			if (password == '' || password.length < 6) {

				$("#tip").show();
				$("#tipMsg").text("请输入密码");
				is = false;
				close();
			}
			if (isReg) {
				$("#tip").show();
				$("#tipMsg").text("手机号码已经注册过");

				is = false;
				close();
			}
			if (is) {
				$("#regForm").submit();
			}
		});

		$('#smsCode').change(
				function() {
					var mobile = $("#mobile").val();
					var v = $('#smsCode').val();

					if (v != "") {
						$.ajax({
							type : "GET",
							url : "/members/vaidateMobile/" + mobile + "/" + v
									+ ".json",
							dataType : "json",
							success : function(data) {

								if (data == 0) {
									$("#tip").show();
									$("#tipMsg").text("验证码错误或者已经过期");
									close();
								}
							}
						});
					}

				});

		

	});
	function sendCode() {
		var is = true;
		var mobile = $("#mobile").val();
		if (mobile == '' || mobile.length < 10 || isNaN(mobile)) {
			$("#tip").show();
			$("#tipMsg").text("请输入手机号码");
			is = false;
			close();
		}

		if (!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))) {
			$("#tipMsg").text("请输入有效的手机号码！");
			is = false;
			close();
		}

		if (is && isSendMsg) {
			setRemainTime();
			
			$.ajax({
				type : "GET",
				url : "/members/getCode/" + mobile + "/1.json",
				dataType : "json",
				success : function(data) {
					$("#tip").show();
					$("#tipMsg").text(data);
					close();

				}
			});
		}

		InterValObj = window.setInterval(setRemainTime, 1000); //启动计时器，1秒执行一次

	}
	
	function close() {
		setTimeout(function() {
			$("#tip").hide();
		}, 2000);
	}

	//timer处理函数
	function setRemainTime() {

		if (curCount == 0) {
			window.clearInterval(InterValObj);//停止计时器
			$("#sc")
					.html(
							"<a href=\"javascript:void(0)\" class=\"yanzheng\" onclick=\"sendCode()\">获取验证码</a>");
			isSendMsg = true;
		} else {
			curCount--;
			isSendMsg = false;
			$("#sc").html(
					"<span class=\"yanzheng\">" + curCount
							+ "秒后可重新获取</span>");
		}
	}
</script>
</head>
<body>
	<div class="hgj">
		<div class="page-all">
			<!--头部开始-->
			<header>
				<div class="navbar">
					<ul>
						<li class="l-back"><img
							src="${pageContext.request.contextPath}/images/left.png" alt="返回" /></li>
						<li class="n-word">注册</li>
						<li class="n-intro"></li>
					</ul>
				</div>
			</header>
			<!---内容开始--->
			<form
				action="${pageContext.request.contextPath}/members/register.html"
				method="post" id="regForm">
				<div class="container">
					<div class="former">
						<ul>
							<li><input type="tel" pattern="[0-9]*" placeholder="请输入手机号码"
								id="mobile" name="wMMobile" maxlength="11" class="user-tel-s">
							</li>
							<li id="sc"><a href="javascript:void(1)" class="yanzheng"
								onclick="sendCode()">获取验证码</a></li>
							<hr
								style="width: 100%; border: 1px solid #D9D9D9; opacity: 0.6; padding: 0; margin: 0">
							<li><input type="tel" pattern="[0-9]*" placeholder="请输入验证码"
								id="smsCode" name="smsCode" maxlength="6" class="user-tel">
							</li>
							<li><input type="password" placeholder="请输入密码" id="password"
								name="wMPassword" maxlength="20" class="user-tel"></li>
						</ul>
					</div>
					<div class="agreement">
						点击-立即注册，即表示您同意<a style="color: #ffb736;">《嘿管家使用协议》</a>
					</div>
					<div class="login-btn">
						<a href="javascript:void();" id="btn_sub">立即注册</a>
					</div>
					<div class="login-layer" style="display: none;" id="tip">
						<span id="tipMsg"></span>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>
